import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity, Image, TouchableWithoutFeedback } from 'react-native';
// import TabNavigator  from 'react-native-tab-navigator';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { friend, selectedFriend, group, selectedGroup, message, selectedMessage, my, selectedMy } from "@/res/fonts/iconSvg";
import Svg from "react-native-svg-uri";
const Tab = createBottomTabNavigator();
function FriendScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>FriendScreen!</Text>
    </View>
  );
}

function GroupScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>GroupScreen!</Text>
    </View>
  );
}
function MessageScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>MessageScreen!</Text>
    </View>
  );
}

function MyScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>MyScreen!</Text>
    </View>
  );
}
const pages = [
  {
    tabPage: 'friend',
    selectedName: 'selectedFriend',
    icon: <Svg width="20" height="20" svgXmlData={friend} />,
    selectedIcon: <Svg width="20" height="20" svgXmlData={selectedFriend} />,
    tabName: '交友',
    component: FriendScreen
  },
  {
    tabPage: 'group',
    selectedName: 'selectedGroup',
    icon: <Svg width="20" height="20" svgXmlData={group} />,
    selectedIcon:  <Svg width="20" height="20" svgXmlData={selectedGroup} />,
    tabName: '圈子',
    component: GroupScreen
  },
  {
    tabPage: 'message',
    selectedName: 'selectedMessage',
    icon: <Svg width="20" height="20" svgXmlData={message} />,
    selectedIcon: <Svg width="20" height="20" svgXmlData={selectedMessage} />,
    tabName: '消息',
    component: MessageScreen
  },
  {
    tabPage: 'my',
    selectedName: 'selectedMessage',
    icon: <Svg width="20" height="20" svgXmlData={my} />,
    selectedIcon: <Svg width="20" height="20" svgXmlData={selectedMy} />,
    tabName: '我的',
    component: MyScreen
  },
]
function CustomTabBar({ state, descriptors, navigation }) {
  // console.error(state, 'state')
  // console.error(descriptors, 'descriptors')
  // console.error(navigation, 'navigation')
  return (
    <View style={{ flexDirection: 'row',justifyContent: 'space-around', borderTopWidth: 1, borderTopColor: 'gray' }}>
      { state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const isFocused = state.index === index;
        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };

        return (
          <TouchableWithoutFeedback
            key={route.key}
            onPress={onPress}
            style={{ width: '25%', height: 40, backgroundColor: 'transparent' }}
          >
            <View style={{ padding: 16, justifyContent: 'center', alignItems: 'center' }}>
              { options.tabBarIcon({ focused: isFocused }) }
              <Text style={{ fontSize: 12, color: isFocused ? 'salmon' : '#5E5E5E' }}>{options.tabBarLabel}</Text>
            </View>
          </TouchableWithoutFeedback>
        );
      })}
    </View>
  );
}
function RootTabs() {
  return (
    <Tab.Navigator
      tabBar={(props) => <CustomTabBar {...props} />}
      screenOptions={({ route }) => ({
        animation: 'shift',
        tabBarActiveTintColor: '#c863b5',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      
      { 
        pages.map((v, i) => {
          return (
            <Tab.Screen 
              name={v.tabPage} 
              component={v.component} 
              key={i}  
              options={{ 
                tabBarLabel: v.tabName,
                headerShown: false,
                tabBarIcon: ({ focused }) => (
                  focused ? v.selectedIcon : v.icon
                ),
                tabBarActiveTintColor: 'salmon',
                tabBarInactiveTintColor: '#5E5E5E'
              }}
            />
          )
        })
      }
    </Tab.Navigator>
  );
}
const styles = StyleSheet.create({
  tabbar: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    backgroundColor: '#fff',
    paddingTop: 10,
    paddingBottom: 10,
    borderTopWidth: 1,
    borderTopColor: '#eee',
  },
  tabbarItem: {
    flex: 1,
    alignItems: 'center',
  },
})
export default function Tabbar() {
  return (
    <RootTabs />
  );
}